<template>
  <div class="batch-tree-node-dialog">
    <div>
      <p>{{ $t("formgen.batchTreeNode.tips") }}</p>
    </div>
    <br />
    <el-row :gutter="0">
      <el-input
        v-model="inputValue"
        :rows="10"
        type="textarea"
      />
    </el-row>
    <br />
    <div class="help-text">
      {{ $t("formgen.batchTreeNode.text1") }}
      <div>
        {{ $t("formgen.batchTreeNode.text2") }}
        <br />
        {{ $t("formgen.batchTreeNode.text3") }}
        <br />
        {{ $t("formgen.batchTreeNode.text4") }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { generateId } from "@/utils";
import { ElMessage } from "element-plus";

// 定义树节点的接口类型
interface TreeNode {
  id: number; // 节点ID
  value: string; // 节点值
  label: string; // 节点显示文本
  level: number; // 节点层级
  children?: TreeNode[]; // 子节点数组
}

// 定义组件的props
const props = defineProps<{
  treeData: TreeNode[]; // 传入的树形数据
}>();

// 定义组件的事件
const emit = defineEmits<{
  (e: "close", data: TreeNode[]): void; // 关闭事件，返回新增的树形数据
}>();

// 定义响应式变量
const inputValue = ref(""); // 文本输入框的值
const nextId = ref(1); // 用于生成新节点的ID

/**
 * 将输入的文本解析为树形结构
 * @param text 输入的文本内容
 * @returns 解析后的树形结构数组
 */
const parseInputToTree = (text: string): TreeNode[] => {
  // 按行分割并过滤空行
  const lines = text.split(/[\r\n]+/).filter(line => line.trim());
  const result: TreeNode[] = [];

  // 处理每一行数据
  lines.forEach(line => {
    // 按"/"分割并去除空白字符
    const parts = line
      .split("/")
      .map(part => part.trim())
      .filter(part => part);
    // 跳过空行或超过4级的数据
    if (parts.length === 0 || parts.length > 4) return;

    let currentLevel = result; // 当前处理的层级

    // 处理每一级节点
    parts.forEach((label, index) => {
      const level = index + 1;

      // 创建节点对象
      const node: TreeNode = {
        id: nextId.value++,
        value: generateId(),
        label,
        level
      };

      // 查找当前层级是否已存在该节点
      let existingNode = currentLevel.find(n => n.label === label);

      if (index === parts.length - 1) {
        // 如果是最后一级，直接添加或更新节点
        if (!existingNode) {
          currentLevel.push(node);
        }
      } else {
        // 如果不是最后一级，需要确保父节点存在
        if (!existingNode) {
          existingNode = { ...node, children: [] };
          currentLevel.push(existingNode);
        } else if (!existingNode.children) {
          existingNode.children = [];
        }
        // 进入下一级
        currentLevel = existingNode.children!;
      }
    });
  });

  return result;
};

/**
 * 处理确认操作
 * 将输入的文本转换为树形结构并触发close事件
 */
const handleConfirm = () => {
  try {
    const newNodes = parseInputToTree(inputValue.value);
    // 清空输入框
    inputValue.value = "";
    // 触发事件，返回新增的节点
    emit("close", newNodes);
  } catch (error) {
    console.log(error);
    ElMessage.error("Failed to parse input. Please check the format.");
  }
};

// 暴露方法给父组件
defineExpose({
  handleConfirm
});
</script>

<style scoped>
.batch-tree-node-dialog {
  padding: 16px;
}

.help-text {
  font-size: 12px;
  color: #979797;
}
</style>
